<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <!-- 插槽 -->
      <slot></slot>
    </div>
    <!-- 导航按钮 -->
    <!-- <div class="swiper-button-prev" @click="prev"></div>
    <div class="swiper-button-next" @click="next"></div> -->
  </div>
</template>

<script>
// 使用此组件中，添加内容一定要有  swiper-slide
import Swiper from "swiper";
import "swiper/swiper-bundle.min.css";

export default {
  data() {
    return {
      mySwiper: null,
    };
  },
  mounted() {
    // dom操作
    // $nextTick 当虚拟dom渲染完毕生成了真实dom方法
    this.$nextTick(() => {
      // 在数据没有请求得到时，实例化了，此时没有得到外层div的绝对宽，滚动没有办法
      this.mySwiper = new Swiper(".swiper-container", {
        // loop: true,
        slidesPerView: 4,
      });
    });
  },
  methods: {
    prev() {
      this.mySwiper.slidePrev();
    },
    next() {
      this.mySwiper.slideNext();
    },
  },
  beforeDestroy() {
    // 关掉动画
    this.mySwiper = null;
  },
};
</script>

<style lang="scss" scoped>
.swiper-container {
  width: 100%;
}
</style>
